<template>

    <div class="container">

        <div class="form">
            <div>
                <h3>欢迎访问东软云医院</h3>
            </div>
            <div>
                <el-input class="input" v-model="username" placeholder="请输入用户名" clearable />

                <!-- <input type="text" placeholder="请输入用户名" v-model="username"> -->
            </div>
            <div>
                <el-input class="input" type="password" v-model="password" show-password placeholder="请输入用密码" />

                <!-- <input type="password" placeholder="请输入密码" v-model="password"> -->
            </div>
            <div>
                <!-- <button @click="login">提交</button> -->

                <el-button type="primary" round @click="login">登录</el-button>

            </div>


        </div>



    </div>

</template>


<script lang="ts" setup name="App">
import { ref } from "vue";
import { useRouter, type Router } from "vue-router";


//获取router

const router: Router = useRouter()


const username = ref('')
const password = ref('')


function login() {
    // alert('获取用户名、密码 发送到后端 ');

    if (username.value == 'admin' && password.value == '123456') {
        alert('登录成功');
        //跳转到 首页
        // 通过js编程式路由

        //将登录信息存储在   浏览器的  sessionStorage
        //浏览器内置的  sessionStorage 、LocalStorage
        sessionStorage.setItem('username', username.value)


        //1 找到router  

        //2  router.push('/home')  router.replace('/home')
        router.replace('/')

    } else {
        alert('用户名或密码错误');
    }
}
</script>


<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    background-color: rgb(49, 51, 51);
    display: flex;
    justify-content: center;
    align-items: center;

}

.form {


    width: 400px;
    height: 400px;
    background-color: rgb(209, 205, 201);
    box-shadow: 0 0 50px rgb(8, 228, 125);
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form .input {

    width: 260px;
    height: 60px;
    outline: none;
    margin-top: 20px;
    border-radius: 5px;
    border: solid 0.5px grey;
    font-size: 1.5em;

}


.form button {
    width: 260px;
    height: 50px;
    outline: none;
    border-radius: 3px;
    margin-top: 10px;
}
</style>